<template>
  <div class="app-container">
    <el-card>
      <main-header @download="download" @search="search" @reset="reset" />
      <list
        :results="results"
        @add="add"
        @edit="edit"
        @detail="detail"
      />
    </el-card>
    <el-dialog
      v-el-drag-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <main-form
        :form-data="formData"
        @submit="submit"
      />
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import MainHeader from './component/main-header'
import List from './component/list'
import MainForm from './component/main-form'
import CommonMixin from '@/mixin/CommonMixin'
import { getAll, submitAll } from '@/api/fieldSensorDaily'
import { removeEmptyField } from '@/utils'
export default {
  components: {
    MainHeader,
    List,
    MainForm
  },
  directives: { elDragDialog },
  mixins: [CommonMixin],
  data() {
    return {
      results: [],
      dialogVisible: false
    }
  },
  methods: {
    async getList() {
      if (this.listQuery.field_id) {
        const { data } = await getAll(removeEmptyField(this.listQuery))
        this.results = data
        console.log(this.results)
      }
    },
    submit(formData) {
      submitAll(formData).then((res) => {
        this.$message.success(res.msg)
        this.dialogVisible = false
      })
    },
    add() {
      this.formData.act = 'add'
      this.formData.rows = [{ position: 10 }, { position: 30 }, { position: 50 }, { position: 70 }]
      this.dialogVisible = true
    },
    edit(row) {
      this.formData = row
      this.formData.act = 'edit'
      this.dialogVisible = true
    },
    detail(row) {
      console.log(row)
    },
    search(searchData) {
      Object.assign(this.listQuery, searchData)
      this.getList()
    },
    download(searchData) {
      console.log(searchData)
    },
    reset() {
      console.log('reset')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
